<template>
  <u-navbar :placeholder="placeholder" :bg-color="bgColor">
    <template slot="left">
      <slot name="left">
        <u-icon :name="hasPrev? 'arrow-left' : 'home'" :color="leftIconColor" @click="handleBack"></u-icon>
        <!--        <text  class="iconfont" :class="hasPrev?'icon-toLeft':'icon-home'" :style="{color}"></text>-->
      </slot>
    </template>
    <template slot="center">
      <slot name="center">
        <text :style="color"> {{ title }}</text>
      </slot>
    </template>
  </u-navbar>
</template>

<script>
import {getCurrentPage} from "@/utils/CommonUtils";

export default {
  name: "l-navbar",
  data() {
    return {
      hasPrev: true
    }
  },
  props: {
    /**固定在顶部时，是否生成一个等高元素，以防止塌陷*/
    placeholder: {
      type: Boolean,
      default: true
    },
    /**导航栏背景设置*/
    bgColor: {
      type: String,
      default: '#fff'
    },
    /**标题*/
    title: {
      type: String,
      default: ''
    },
    /**颜色 字体图标和标题保持颜色一致*/
    color: {
      type: String,
      default: 'color:#fff'
    },
    leftIconColor: {
      type: String,
      default: '#fff'
    },
  },
  created() {
    this.getCurrentPage()
  },
  methods: {
    handleBack() {
      if (this.hasPrev) {
        uni.navigateBack()
      } else {
        uni.switchTab({
          url: "/pages/index/index"
        })
      }
    },
    async getCurrentPage() {
      try {
        await getCurrentPage();
        this.hasPrev = true
      } catch (e) {
        this.hasPrev = false
      }
    }
  },
}
</script>

<style scoped lang="scss">
.icon-toLeft, .icon-home {
  font-size: 40rpx;
}
</style>
